<template>
  <div class="contBody">
    <h2 class="title" @click="handleTab">饼图（点击更换数据）</h2>
    <!-- echarts 饼图 -->
    <EchartsComp
      class="bar"
      ref="chart"
      :options="barOptions"
      width="100%"
      height="400px"
    />
  </div>
</template>

<script>
import EchartsComp from "@/components/echarts/EchartsComp.vue";
export default {
  name: "BmxxPage",
  data() {
    return {
      barOptions: {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "40",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" },
            ],
          },
        ],
      },
      barData: [
        ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        [188, 255, 362, 455, 844, 863, 442],
      ],
    };
  },
  components: { EchartsComp },
  created() {
    this.init();
  },
  methods: {
    init() {
      // 数据处理
      this.barOptions.series[0].data = [];
      this.barData[0].forEach((ele, index) => {
        this.barOptions.series[0].data.push({
          name: ele,
          value: this.barData[1][index],
        });
      });
    },
    handleTab() {
      // 数据更新
      this.barData = [
        ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
        [
          this.getNum(8, 20),
          this.getNum(8, 20),
          this.getNum(8, 20),
          this.getNum(8, 20),
          this.getNum(8, 20),
          this.getNum(8, 20),
          this.getNum(8, 20),
        ],
      ];
      this.init();
      this.$refs.chart.Refresh();
    },
    // 生成随机数
    getNum(min, max) {
      const num = parseInt(Math.random() * (max - min + 1) + min);
      return Math.floor(num);
    },
  },
};
</script>

<style scoped>
.contBody {
  width: 100%;
  box-sizing: border-box;
}

.bar {
  width: 100%;
  height: 400px;
}
</style>
